<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>123</title>
		<script src="../js/echarts/jquery-1.11.1.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FPTNyn1QvwkNGaX86RGSDAjL"></script>
		<script src="../js/echarts/build/dist/echarts.js" type="text/javascript"></script>
	    <script type="text/javascript" src="../js/range-data.js"></script>
	    <script type="text/javascript" src="../js/zone-data.js"></script>
	    <script src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js" type="text/javascript"></script> 
	    <style type="text/css">  
		   .anchorBL{  
		       display:none;  
		   }  
		 </style>  
  		<script>
		require.config({
			paths: {
				echarts: "../js/echarts/build/dist",
			}
		});	
		require(
		[
			'echarts', // 代指echarts设置的路径，即'../resource/build/dist'
			'echarts/chart/main', // 使用柱状图就加载bar模块，按需加载,引入bar.js
			'echarts/chart/map',// 加载地图,引入funnel.js文件, 按需加载,		
		],
		function(ec,BMapExtension) {
				 var USERTHEME = "midnight";
				 var _line, _lineEffect, _range, _rangeFill, _rangeStroke;
	                switch(USERTHEME){
	                    case 'midnight': default:
	                        // 流动线
	                        _line = '#FFD924';
	                        _lineEffect = 'rgba(255, 217, 36, 0.4)';
	                        // 地图区域
	                        _range = '#008DFF';
	                        // hover填充色
	                        _rangeFill = '#008DFF';
	                        // hover边框色
	                        _rangeStroke = 'blue';
	                        break;
	                    case 'simple':
	                        _line = '#F5511F';
	                        _lineEffect = 'rgba(245, 81, 31, 0.4)';
	                        _range = '#1A70FF';
	                        _rangeFill = '#96BDFC';
	                        _rangeStroke = '#8FB1E1';
	                        break;
	                }
		       
                
                
                window.BMapExt = new BMapExtension($('#main')[0], BMap, ec,{
                    enableMapClick: false
                });
                window.map = BMapExt.getMap();
				window.container = BMapExt.getEchartsContainer();
				
				function ComplexCustomOverlay(point, text, mouseoverText){
                    this._point = point;
                    this._text = text;
                    this._overText = mouseoverText;
                }
                ComplexCustomOverlay.prototype = new BMap.Overlay();
                ComplexCustomOverlay.prototype.initialize = function(map){
                    this._map = map;
                    var div = this._div = document.createElement("div");
                    div.style.position = "absolute";
                    div.style.zIndex =1;          
                    div.style.backgroundColor = "#ea6835";
                    div.style.border = "1px solid #ea6835";
                    div.style.color = "white";
                    div.style.height = "24px";
                    div.style.padding = "2px";
                    div.style.lineHeight = "22px";
                    div.style.whiteSpace = "nowrap";
                    div.style.MozUserSelect = "none";
                    div.style.fontSize = "12px";
                    div.style.borderRadius = "2px";
                    var span = this._span = document.createElement("span");
                    div.appendChild(span);
                    span.appendChild(document.createTextNode(this._text));
                    var that = this;

                    var arrow = this._arrow = document.createElement("div");
                    arrow.style.background = "url(../img/arrow.png) no-repeat";
                    arrow.style.position = "absolute";
                    arrow.style.width = "11px";
                    arrow.style.height = "10px";
                    arrow.style.top = "22px";
                    arrow.style.left = "15px";
                    arrow.style.overflow = "hidden";
                    div.appendChild(arrow);
                    map.getPanes().labelPane.appendChild(div);
                    return div;
                };
                ComplexCustomOverlay.prototype.draw = function(){
                    var map = this._map;
                    var pixel = map.pointToOverlayPixel(this._point);
                    this._div.style.left = pixel.x -50+ "px"; 
                    this._div.style.top  = pixel.y -30+ "px";
                };
                var i_loc_var_myCompOverlay={};
                function closeMyCompOverlay(){
                    for(var i in i_loc_var_myCompOverlay){
                        i_loc_var_myCompOverlay[i].hide();
                    }
                }
                 //百度地图功能
                /*map.setMapStyle({
                    style: USERTHEME
                });  */
               
                 map.setMapStyle({
           styleJson: [
          {
                    'featureType': 'land',     //调整土地颜色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#081734'
                    }
          },
          {
                    'featureType': 'building',   //调整建筑物颜色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#04406F'
                    }
          },
         {
                    'featureType': 'building',   //调整建筑物标签是否可视
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'highway',     //调整高速道路颜色
                    'elementType': 'geometry',
                    'stylers': {
                    'color': '#015B99'
                    }
          },
          {
                    'featureType': 'highway',    //调整高速名字是否可视
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'arterial',   //调整一些干道颜色
                    'elementType': 'geometry',
                    'stylers': {
                    'color':'#003051'
                    }
          },
          {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#044161'
                    }
          },
          {
                    'featureType': 'subway',    //调整地铁颜色
                    'elementType': 'geometry.stroke',
                    'stylers': {
                    'color': '#003051'
                    }
          },
          {
                    'featureType': 'subway',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'all',     //调整所有的标签的边缘颜色
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                              'color': '#313131'
                    }
          },
          {
                    'featureType': 'all',     //调整所有标签的填充颜色
                    'elementType': 'labels.text.fill',
                    'stylers': {
                              'color': '#FFFFFF'
                    }
          },
          {
                    'featureType': 'manmade',   
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'manmade',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'local',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'local',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'subway',
                    'elementType': 'geometry',
                    'stylers': {
                              'lightness': -65
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                              'lightness': -40
                    }
          },
          {
                    'featureType': 'boundary',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#8b8787',
                              'weight': '1',
                              'lightness': -29
                    }
          }
    ]
        });
                map.enableScrollWheelZoom(); //允许滚轮缩放
                map.enableKeyboard();
                map.disableDoubleClickZoom();
                map.setMinZoom(11);
                map.setMaxZoom(14);        
                var b = new BMap.Bounds(new BMap.Point(116.941374 , 30.529586),new BMap.Point(119.198492 , 31.777557));  //设置边界   
                try {   
                    BMapLib.AreaRestriction.setBounds(map, b); // 已map为中心，已b为范围的地图
                } catch (e) {
                    // 捕获错误异常
                    alert(e);
                }       
				var i_loc_var_initZoom=11;      

                var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

                map.addControl(top_left_control);    

                map.centerAndZoom(new BMap.Point(118.301624,31.355314), i_loc_var_initZoom);
                 var beforeArea;  //保存前一个被点击的多边形
        		 $.each(ranges, function(num,value) {
 					var vertices=[];	
 					for(var i=0;i<value.range.length;i++){
 						 var gps = value.range[i].split(",");
 						 vertices.push(new BMap.Point(gps[0], gps[1]));
 					}
                            
                    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(zonePosObj[value.id].x,zonePosObj[value.id].y), zonePosObj[value.id]["title"]);  
                    map.addOverlay(myCompOverlay);					 
                    i_loc_var_myCompOverlay[value.id] = myCompOverlay;

                    var polygon = new BMap.Polygon(vertices, {
                        strokeColor: "#008DFF",
                        strokeWeight:1, 
                        strokeOpacity:1,
                        fillOpacity:0.1, 
                        fillColor: "", 
                        strokeStyle: 'none'
                    });                       
 					map.addOverlay(polygon);   //增加多边形 
                    polygon.addEventListener("click", function(e){  
                        if(beforeArea){     //去掉之前点击后的颜色效果
                            beforeArea.setFillOpacity(0.1);
                            beforeArea.setStrokeWeight(1);
                            beforeArea.setFillColor('');
                            beforeArea.setStrokeColor(_range);
                            beforeArea.flag=false;
                        }
                        beforeArea=this;
                        this.flag=true; 
                         i_loc_var_myCompOverlay[value.id].show();
                        $('#zoneListEle').val(zonePosObj[value.id]["title"]);
                        $('#zoneListEle').attr('areaId',value["id"]);
                        var title=zonePosObj[value.id]["title"];
                       // alert(value["id"]);
                      	var gps = value.center.split(",");
                        map.centerAndZoom(new BMap.Point(gps[0],gps[1]), 12);
                        var o=option;
                        var d=[
                        		[{name:title}, {name:'襄安镇'}],
                   				[{name:title}, {name:'大砻坊公共服务中心'}],
                   				[{name:title}, {name:'龙山街道'}],
                    			[{name:title}, {name:'汤沟镇'}],
                    			[{name:title}, {name:'南瑞社区'}]
                    		  ]
                        option.series[0].markLine.data.length=0;
                        option.series[0].markLine.data=d;
                       
                      
        				BMapExt.setOption(option);
        				//BMapExt.refresh
                        //showArea();
                        polygon.setFillColor("#008DFF");
                        polygon.setStrokeColor("blue");
                    }); 
                  

                    polygon.addEventListener("mouseover", function(e){
                        i_loc_var_myCompOverlay[value.id].show();
                        polygon.setFillOpacity(0.1);
                        polygon.setStrokeWeight(4);
                        polygon.setFillColor("#008DFF");
                        polygon.setStrokeColor("blue");                    
                    });            

                    polygon.addEventListener("mouseout", function(e){
                        i_loc_var_myCompOverlay[value.id].hide();
                        if(this.flag!=true){
                            polygon.setFillOpacity(0.1);
                            polygon.setStrokeWeight(1);
                            polygon.setFillColor('');
                            polygon.setStrokeColor("#008DFF");
                        }                          
                    });   
					
                    //allOverlays[range.id] = polygon;           
                });
                closeMyCompOverlay();
        		 window.option = {
                    color: ['gold','#fff','gold'],
                    title : {
                        text: '',
                        subtext:'',
                        x:'center',
                        textStyle : {
                            color: '#fff'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: function (v) {
                             return v[1].replace(':', ' > '); 
                        }
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        x:'left',
                        data:['芜湖'],
                        selectedMode: 'single',
                        selected:{
                        },
                        textStyle : {
                            color: '#fff'
                        }
                    },
                    toolbox: {
                        show : false
                    },
                    dataRange: {
                        show: false,
                        min : 0,
                        max : 100,
                        x: 'right',
                        calculable : false,
                        color: ['#ff3333'],
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    series : [
                        {
                            name:'芜湖',
                            type:'map',
                            mapType: 'none',
                            data:[],
                            geoCoord: {
                                '昆山乡': [117.55857,31.052957],
                                '严桥镇': [117.709151,31.439593],
                                '红庙镇': [117.777336,31.372805],
                                '赫店镇': [117.807143,31.30421],
                                '十里墩乡': [117.888435,31.265311],
                                '姚沟镇': [117.896309,31.163063],
                                '高沟镇': [117.949102,31.120936],
                                '石涧镇': [117.891968,31.434601],
                                '无城镇': [117.908818,31.3088],
                                '福渡镇': [117.957886,31.299382],
                                '泥汊镇': [117.991006,31.184622],
                                '牛埠镇': [117.683255,31.031624],
                                '陡沟镇': [118.076761,31.363971],
                                '白茆镇': [118.071056,31.297137],
                                '汤沟镇': [118.18626,31.331813],
                                '沈巷镇': [118.236713,31.469845],
                                '二坝镇': [118.332789,31.362237],
                                '何湾镇': [118.098692,30.823455],
                                '烟墩镇': [118.172053,30.727637],
                                '工山镇': [118.256952,30.937667],
                                '三里镇': [118.266021,30.776447],
                                '家发镇': [118.264882,30.996609],
                                '鹤毛乡': [117.572854,31.126377],
                                '籍山镇': [118.340358,30.920885],
                                '许镇镇': [118.41584,31.071561],
                                '弋江镇': [118.481158,30.909802],
                                '荻港镇': [118.024042,31.117381],
                                '孙村镇': [118.117717,31.059365],
                                '新港镇': [118.077224,31.192499],
                                '繁阳镇': [118.205075,31.10809],
                                '峨山镇': [118.249122,31.077248],
                                '平铺镇': [118.327852,31.063952],
                                '高安街道': [118.153234,31.201403],
                                '洪巷乡': [117.661352,31.126388],
                                '横山镇': [118.222521,31.190848],
                                '峨桥镇': [118.277849,31.171475],
                                '保定街道': [118.21456,31.254298],
                                '三山街道': [118.248276,31.209225],
                                '龙湖街道': [118.307492,31.212746],
                                '白马街道': [118.386682,31.211088],
                                '瀂港街道': [118.368502,31.286221],
                                '马塘街道': [118.424127,31.311972],
                                '火龙街道': [118.406711,31.248534],
                                '荆山公共服务中心': [118.459658,31.31649],
                                '蜀山镇': [117.628213,31.185046],
                                '方村街道': [118.48144,31.213533],
                                '六郎镇': [118.555554,31.251876],
                                '陶辛镇': [118.495651,31.165929],
                                '花桥镇': [118.62508,31.262363],
                                '湾沚镇': [118.581731,31.141036],
                                '红杨镇': [118.563904,31.071174],
                                '龙山街道': [118.414599,31.473815],
                                '裕溪口街道': [118.318571,31.44491],
                                '四褐山街道': [118.367011,31.437928],
                                '泉塘镇': [117.699979,31.202028],
                                '湾里街道': [118.391457,31.400795],
                                '官陡街道': [118.417892,31.386686],
                                '清水街道': [118.469113,31.385752],
                                '万春街道': [118.533506,31.358548],
                                '天门山公共服务中心': [118.367031,31.382176],
                                '弋矶山公共服务中心': [118.373188,31.366091],
                                '汀棠公共服务中心': [118.387338,31.364773],
                                '赭麓公共服务中心': [118.39669,31.353009],
                                '赭山公共服务中心': [118.375848,31.349848],
                                '张家山公共服务中心': [118.392297,31.346394],
                                '刘渡镇': [117.817341,31.150578],
                                '镜湖新城公共服务中心': [118.416283,31.335996],
                                '滨江公共服务中心': [118.371899,31.338105],
                                '大砻坊公共服务中心': [118.396884,31.329855],
                                '中山南路街道': [118.372227,31.323523],
                                '利民路街道': [118.379269,31.317415],
                                '弋江桥街道': [118.390577,31.318533],
                                '南瑞社区': [118.403178,31.31278],
                                '开城镇': [117.740228,31.300207],
                                '襄安镇': [117.805028,31.200685]
                            },
                            markLine : {
                                smooth : true,
                                symbol : ['circle', 'circle'],
                                effect : {
                                    show: true,
                                    scaleSize: 1,
                                    period: 15, // 运动周期，无单位，值越大越慢
                                    color: '#fff',
                                    shadowColor: _lineEffect,
                                    shadowBlur : 3 
                                },
                                itemStyle : {
                                    normal: {
                                        borderWidth:2,
                                        borderColor: _line, //流动线的颜色
                                        lineStyle: {
                                            type: 'solid'
                                        }
                                    }
                                },
                                data :[
									 [{name:'张家山公共服务中心'}, {name:'襄安镇'}],
                   					 [{name:'弋矶山公共服务中心'}, {name:'大砻坊公共服务中心'}],                 
                   					 [{name:'马塘街道'}, {name:'龙山街道'}],
                    				 [{name:'二坝镇'}, {name:'汤沟镇'}],
                    				 [{name:'官陡街道'}, {name:'南瑞社区'}]                                             
                                ]
                            },
                            markPoint : {
                                symbol:'circle',
                                symbolSize : 2.5,
                                effect : {
                                    show: true,
                                    scaleSize: 2.5,
                                    period: 3, // 运动周期，无单位，值越大越慢
                                    color: '#fff',
                                    shadowColor:'#FD4B0D',
                                    shadowBlur : 3,
                                    type: 'scale',
                                    loop: true,
                                    period: 10,
                                    bounceDistance: 5,//跳动距离，单位为px，type为bounce时有效 
                                    color : 'red',
                                },
                                itemStyle:{
                                    normal:{
                                        color: ['#FD4B0D'],//点的颜色
                                        label:{show:false}
                                    }
                                },
                                data : []
                            }
                        }
                    ]
                };  
						     
         		window.myChart = BMapExt.initECharts(container);
        		window.onresize = myChart.onresize;
        		BMapExt.setOption(option);
				
				/*var ecConfig = require('echarts/config');
				function eConsole(param) {			   

						var top = param.event.clientY;
						alert(top);
				        $('#myModal').modal('toggle');
				        $('#myModal').on('shown.bs.modal', centerModals(top));
				        function centerModals(top) {   
		    				$('#myModal').each(function(i) {   
		       				//var $clone = $(this).clone().css('display', 'block').appendTo('body'); 
		       				//var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
		        			top = top > 0 ? top : 0;   
		        			
		        			$(this).find('.modal-content').css("margin-top", top);   
		    				});   
						} 
				}
				
				
				myChart.on(ecConfig.EVENT.CLICK, eConsole);
				myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
				//myChart.on(ecConfig.EVENT.HOVER, eConsole);
				myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
				myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
				myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
				myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);*/
          
		
			}
		)

		
		
	</script>
	</head>
	<body>
	<div id="main" style="width: 1366px;height: 768px;"></div>
	
	
	

	
</body>
</html>
